<template>
	<view style="height: 100vh;">
		<view class="service_content">
			<main-page :title="title">
				<template v-slot:mainBody>
					<chat-session v-show="currentOption == 'online'"></chat-session>
					<chat-user v-show="currentOption == 'users'"></chat-user>
					<community v-show="currentOption == 'community'"></community>
					<chat-mine v-show="currentOption == 'mine'"></chat-mine>
				</template>
			</main-page>
		</view>
		<!--底部按钮-->
		<chat-bottom :currentOption="currentOption" @changeBottomSelect="changeBottomSelect"></chat-bottom>
	</view>
</template>

<script>
	import chatBottom from "@/components/chat-bottom/chat-bottom.vue"
	import chatSession from "@/components/chat-session/chat-session.vue"
	import chatUser from "@/components/chat-user/chat-user"
	import community from "@/pages/community/community"
	import chatMine from "@/components/chat-mine/chat-mine"
	import mainPage from "@/components/common/main-page.vue"
	
	// import io from "socket.io-client";
	import io from '@hyoga/uni-socket.io';
	export default {
		components: {
			chatBottom,
			chatSession,
			chatUser,
			community,
			chatMine,
			mainPage
		},
		data() {
			return {
				currentOption: "users",
				allSessionSelectId: "",
				readyReciver: "",
				socket: null,
				title:"好友"
			}
		},
		mounted() {
			this.init()
		},
		onShow() {
			this.$store.commit("setPropName",{propName:'sessionSelectId',value:0});
			this.$store.commit("setPropName",{propName:'allSessionSelectId',value:0});
		},
		methods: {
			changeBottomSelect(data) {
				this.currentOption = data.type;
				// uni.setNavigationBarTitle({
				// 	title:data.name
				// })
				this.title = data.name
			},
			init() {
				this.initSocket()
			},
			initSocket() {
				const socket = io(this.$Config.SOCKETAPI, {
				  query: {},
				  transports: [ 'websocket', 'polling' ],
				  timeout: 5000,
				});
				this.$store.commit('setPropName', {
					propName: 'socket',
					value: socket
				});
				this.$store.state.socket.on("connect", () => {
					console.log("连接成功");
					this.$store.state.socket.emit("joinChat", {
						SendId: this.$store.state.sender.Id,
						SendName: this.$store.state.sender.Name,
						ReviceId: -1,
						ReviceName: "",
						NoCode: this.$store.state.noCode,
					});
				});
				this.$store.state.socket.on("disconnect", () => {
					console.log("连接已断开");
				});
				//修改信息状态
				this.$store.state.socket.on("changMsgState", (data) => {
					let conversitionList = this.$store.state.conversitionList;
					conversitionList.map((x) => {
						if (x.NoCode != null && x.NoCode == data.NoCode) {
							x.State = 1;
						}
					});
					this.$store.commit('setPropName', {
						propName: 'conversitionList',
						value: conversitionList
					});
				});
				// 加入会话成功
				this.$store.state.socket.on("joinSuccess", (data) => {
					this.$store.commit('setPropName', {
						propName: 'conversitionList',
						value: data.conversition
					});
					if (this.$store.state.sessionList.length == 0) {
						this.$store.commit('setPropName', {
							propName: 'sessionList',
							value: data.historySessionList
						});
					}
				});
				//接收信息
				this.$store.state.socket.on("reviceMsg", (data) => {
					if (data.ReciverId == this.$store.state.sender.Id) {
						// store.playMusic();
						for (let item of this.$store.state.sessionList) {
							if (item.Id == data.SendId && this.$store.state.sessionSelectId == data.SendId) {
								data.ReadFlag = true;
								let query = {
									SendId: data.SendId,
									ReciverId: this.$store.state.sender.Id,
								};
								this.$store.state.socket.emit("changeMsgRead", query);
								break;
							}
						}
					}
					this.$Common.sendLocal(data);
					let len = this.$store.state.sessionList.filter((x) => {
						let id = x?.FormId || x.Id;
						return id == data.SendId;
					})?.length ?? 0;
					if (len === 0) {
						let item = this.$store.state.allSessionList.find((x) => x.Id == data.SendId);
						let sessionList = this.$store.state.sessionList;
						let session = {
							FormId: item.Id,
							Name: item.Name,
							NickName: item.NickName,
							PersonalitySign: item.PersonalitySign,
							Mobile: item.Mobile,
							Region: item.Region,
							Avatar: item.Avatar,
							Email: item.Email,
							ById: store.sender.Id,
						};
						sessionList.push(session);
						this.$store.commit('setPropName', {
							propName: 'sessionList',
							value: sessionList
						});
					}
					this.$Common.toBottom();
				});
				//多设备在线时，强制旧设备下线
				this.$store.state.socket.on("squeezeOut", (data) => {
					if (data.noCode == this.$store.state.noCode) {
						this.$Common.logout();
						alert("账户在其他地方登陆，会话已断开");
						this.$Common.redirectTo("/index/index");
					}
				});
			}
		}
	}
</script>

<style scoped>
	.service_content {
		width: 100%;
		height: 90vh;
		background-color: #fff;
		overflow: hidden;
	}
</style>
